<template>
  <div class="home">
    <!-- 搜索框 -->
  <van-search
    v-model="value"
    disabled
    shape="round"
    background="#cccfff"
    placeholder="请输入搜索关键词"
    @click="$router.push('/home/search')"
  />
  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#1989fa" >
    <van-swipe-item v-for="item in dataList" :key="item.id">
      <img :src="item.image_url" alt="" width=100%>
    </van-swipe-item>
  </van-swipe>

  <!-- 搜素内容 -->
  <!-- <router-link to="/home/search"></router-link> -->
  <transition name="van-slide-right">
    <router-view></router-view>
  </transition>

  </div>
</template>

<script>
// @ is an alias to /src
import { getHomeList } from '@/request/api.js'
export default {
  name: 'Home',
  data() {
    return {
      value: '',
      dataList: []
    }
  },
  created() {
    // console.log(this)
    // 在生命周期函数中调用，记得返回的是promise对象，要用await就要用async
    // this.initDataList()
    // console.log(getHomeList())
    getHomeList()
    // 请求成功之后执行,获取数据
      .then(res => {
        // console.log('success!!!132456789')
        // console.log(res.data.banner)
        // 数据转存到data中
        this.dataList = res.data.banner
      })
      .catch(err => {
        console.log('error')
        console.log(err)
      })
  },

  // methods: {
  //   // 定义请求数据函数
  //   async initDataList () {
  //     const { res } = await getHomeList()
  //     console.log(res)
  //   }
  // },
  components: {
  }
}
</script>
<style lang="less">
.slide-enter,.slide-leave-to{
  right:-100%;
}
.slide-enter-active,.slide-leave-active{
  transition:all .2s linear;
}
.slide-enter-to,.slide-leave{
  right:0;
}
</style>
